<template>
  <div class="about">
    <h1>对轮播组件测试</h1>
    <!--
      这里的style会在组件的根元素上生效
    - list:是图片列表数据，它是一个数组，保存要轮播图片信息
    - auto:2000. 开启自动播放。2000毫秒切换一张.
    - curIdx:初始播放第几张
-->
     <my-slider
      style="width:550px;height:350px;"
      :list="list"
      :curIdx='curIdx'
      auto='2000'
      @click="hClick"
      @slider="hSlider"
      >
    </my-slider>
  </div>
</template>

<script>

export default {
  name: 'SliderTest',
  data () {
    return {
      curIdx: 1, // 默认显示第二张图
      list: [ // 需要轮播的图片数据
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603552928895&di=033a3b0900cb6094b581325f1b6a43ad&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fe%2F0f%2F1b7e513753.jpg',
          alt: '离太阳最近的地方的一场春耕'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603552961721&di=e0ff498eb7dbb671ea204454cf0ca58f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2f6ae348b19c83fdc721ca5a54d4adb8d7455fa31dc76-GMqiCq_fw658',
          alt: '长江三峡水库'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603553792310&di=db02409d236f067161d3a6d51439d3a1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F1%2F74%2Fe433515514.jpg_195.jpg',
          alt: '月球方舟在格陵兰岛测试'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603553028011&di=100b009e9f826b13b7d52b86a1947568&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F1%2F50%2F3b06419346.jpg',
          alt: '虎门大桥水域恢复通航'
        }
      ]
    }
  },
  methods: {
    hClick (index) {
      alert(index)
      console.log('当前是', index, '被点击')
    },
    hSlider (idx) {
      this.curIdx = idx
      console.log(idx)
    }
  }
}
</script>
